<template>
  <view class="picker-item">
    <view class="container">
      <view class="label">{{ label }}</view>
      <view class="content" @click="showPopup = true">{{ rangeLabel }}</view>
      <view class="right-arrow"></view>
    </view>

    <view :class="['popup-container', showPopup ? 'show' : '']" @click="showPopup = false">
      <view class="popup-model" @click.stop>
        <view class="opts">
          <view class="btn" @click="showPopup = false">取消</view>
          <view class="btn confirm" @click="handlerConfirm">确认</view>
        </view>
        <picker-view
          :value="rangeValue"
          class="picker-view"
          :indicator-style="indicatorStyle"
          immediate-change
          @change="bindPickerChange"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in range" :key="index">{{ item.label }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: '',
    },
    range: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number],
      default: 0,
    },
  },

  data() {
    return {
      rangeValue: [0],
      currentVaule: '',
      indicatorStyle: `height: 50px;`,
      showPopup: false,
    };
  },

  computed: {
    rangeIndex() {
      return this.range.findIndex((item) => item.value === this.value);
    },
    rangeLabel() {
      const index = this.range.findIndex((item) => item.value === this.value);
      return this.range[index]?.label || `请选择${this.label}`;
    },
  },

  watch: {
    value: {
      handler: function (nval) {
        this.currentVaule = nval;
        this.$nextTick(() => {
          const index = this.range.findIndex((item) => item.value === nval);
          this.rangeValue = [index];
        });
      },
      immediate: true,
    },
  },
  methods: {
    bindPickerChange(e) {
      console.log('picker range change: ', e);
      this.rangeValue = e.detail.value;
      this.currentVaule = this.range[this.rangeValue[0]].value;
    },

    handlerConfirm() {
      this.$emit('change', this.currentVaule);
      this.showPopup = false;
    },
  },
};
</script>

<style lang="less" scoped>
.picker-item {
  padding: 30rpx 34rpx;
  border-bottom: 1px solid #eee;
  color: #666;
  font-size: 32rpx;
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .label {
      flex-shrink: 0;
    }
    .content {
      margin: 0 10rpx 0 20rpx;
      flex: 1;
      text-align: right;
    }
  }

  .popup-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
    &.show {
      opacity: 1;
      pointer-events: inherit;
      .popup-model {
        bottom: 0;
      }
    }
    .popup-model {
      position: absolute;
      left: 0;
      bottom: -600rpx;
      padding: 20rpx 0 calc(20rpx + env(safe-area-inset-bottom));
      width: 100%;
      height: 600rpx;
      background: #fff;
      transition: all 0.2s ease-in-out;
      .opts {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10rpx 30rpx 30rpx;
        box-sizing: border-box;
        .btn {
          &.confirm {
            color: #41b75a;
          }
        }
      }
      .picker-view {
        width: 100%;
        height: 100%;
        .item {
          text-align: center;
          line-height: 100rpx;
        }
      }
    }
  }
}
</style>
